<template>
  <div class="health" ref="health_ref"></div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      msg: "lalalalal",
      healthChart: null,
      allData: null,
      currentPage: 1, // 当前页
      totalPage: 0, /// 总共页
      timerId: null, // 定时器
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    // 页面加载时进行屏幕适配
    this.screenAdapter();
  },
  created() {},
  destroyed() {
    clearInterval(this.timerId);
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 初始化图表
    initChart() {
      this.healthChart = this.$echarts.init(this.$refs.health_ref);
      this.healthChart.on("mouseover", () => {
        clearInterval(this.timerId);
      });
      this.healthChart.on("mouseout", () => {
        this.startInterval();
      });
      var option = {
        backgroundColor: "#fff",
        title: {
          text: "健康度",
          left: "3%",
          top: "3%",
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "0%",
          top: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value;
          },
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#000",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#000",
              },
            },
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgb(57,89,255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgb(46,200,207,1)",
                  },
                ]),
              },
            },
          },
        ],
      };
      this.healthChart.setOption(option);
      // 鼠标点击事件
      this.healthChart.on("click", (param) => {
        console.log(param);
      });
    },

    // 获取数据
    async getData() {
      const { data: ret } = await this.$axios.get("health_data");
      this.allData = ret.data;
      this.allData.sort((a, b) => {
        return a.score - b.score;
      });
      this.totalPage =
        this.allData.length % 5 === 0
          ? this.allData.length / 5
          : this.allData.length / 5 + 1;
      this.updateChart();
      this.startInterval(); // 启动定时器
    },
    // 图表更新
    updateChart() {
      var start = (this.currentPage - 1) * 5;
      var end = this.currentPage * 5;
      const showData = this.allData.slice(start, end);
      const areaNames = showData.map((item) => {
        return item.name;
      });
      const areaScores = showData.map((item) => {
        return item.score;
      });
      var option = {
        yAxis: [
          {
            data: areaNames,
          },
          {
            data: areaScores,
          },
        ],
        series: [
          {
            data: areaScores,
          },
        ],
      };
      this.healthChart.setOption(option);
    },
    // 开启定时器
    startInterval() {
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        this.currentPage++;
        if (this.currentPage > this.totalPage) {
          this.currentPage = 1;
        }
        this.updateChart();
      }, 3000);
    },
    /// 屏幕大小适配
    screenAdapter() {
      const titleFontSize = (this.$refs.health_ref.offsetWidth / 100) * 3;
      const option = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        series: [
          {
            barWidth: titleFontSize,
            barBorderRadius: titleFontSize / 2,
            itemStyle: {
              barBorderRadius: titleFontSize / 2,
            },
          },
        ],
      };
      this.healthChart.setOption(option);
      this.healthChart.resize();
    },
  },
};
</script>

<style scoped>
.health {
  width: 100%;
  height: 100%;
}
</style>